<template>
  <div class="map">
    <el-container>
      <el-aside>
        <el-amap ref="map" :center="center" :zoom="zoom" @init="init" />
      </el-aside>
      <el-main>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="宁夏数字工艺博物馆" name="first">
            <ul>
              <li>
                <h3>
                  地址
                </h3>
                <p>银川市拱墅区小河路334号</p>
              </li>
              <li>
                <h3>
                  交通方式
                </h3>
                <p>70路、61路、63路公交车至登云路小河路口下</p>
              </li>
              <li>
                <h3>
                  联系电话
                </h3>
                <p>0571-88197511 (宁夏数字工艺博物馆前台)</p>
              </li>
            </ul>
          </el-tab-pane>

          <el-tab-pane label="中国刀剪剑博物馆" name="second">
            <ul>
              <li>
                <h3>地址</h3>
                <p>银川市拱墅区小河路336号</p>
              </li>

              <li>
                <h3>交通方式</h3>
                <p>地铁5号线至“大运河站”D出口，再步行10分钟</p>
              </li>

              <li>
                <h3>联系电话</h3>
                <p>0571-88197508 (中国刀剪剑博物馆前台)</p>
              </li>
            </ul>
          </el-tab-pane>

          <el-tab-pane label="中国扇博物馆" name="third">
            <ul>
              <li>
                <h3>地址</h3>
                <p>银川市拱墅区小河路450号</p>
              </li>

              <li>
                <h3>交通方式</h3>
                <p>水上巴士、漕舫至拱宸桥码头，过拱宸桥到桥弄街</p>
              </li>

              <li>
                <h3>联系电话</h3>
                <p>0571-88197518 (中国扇博物馆前台)</p>
              </li>
            </ul>
          </el-tab-pane>

          <el-tab-pane label="中国伞博物馆" name="fourth">
            <ul>
              <li>
                <h3>地址</h3>
                <p>银川市拱墅区小河路336号</p>
              </li>

              <li>
                <h3>交通方式</h3>
                <p>98路、129路、79路、1路公交车至拱宸桥西站下</p>
              </li>

              <li>
                <h3>联系电话</h3>
                <p>0571-88197508 (中国伞博物馆前台)</p>
              </li>
            </ul>
          </el-tab-pane>

        </el-tabs>
<!--        <img src="../front_home/src/assets/img/icon.jpg">-->
      </el-main>
    </el-container>


  </div>
</template>

<script setup>
import { ref, reactive, shallowRef } from "vue";
// import { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

// const handleClick = (tab:TabsPaneContext, event: Event) => {
//   console.log(tab, event)
// }

/** 地图实例    （shallowRef：如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换） */
const myMap = shallowRef(null);
/** 地图中心点（默认） */
const center = reactive([106.15,38.52]);
/** 地图缩放级别（默认） */
const zoom = ref(17);
const init = (map) => {
  const AMap = window.AMap;
  myMap.value = map;
  getUserPosition(AMap);
};
/** 添加地图标记点 */
const addMarker = (AMap) => {
  const marker = new AMap.Marker({
    position: center,
  });
  (myMap.value).add(marker);
};
/** 高德地图获取当前用户位置 */
const getUserPosition = (AMap) => {
  console.log("获取位置中...");
  AMap.plugin("AMap.Geolocation", function () {
    //异步加载插件
    const Geolocation = new AMap.Geolocation({
      // 是否使用高精度定位，默认：true
      enableHighAccuracy: true,
      // 设置定位超时时间，默认：无穷大
      timeout: 6000,
      // 定位按钮的停靠位置的偏移量
      offset: [10, 20],
      //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      zoomToAccuracy: true,
      //  定位按钮的排放位置,  RB表示右下
      position: "RB",
    });
    Geolocation.getCurrentPosition((status, result) => {
      if (status == "complete") {
        onComplete(result);
      } else {
        onError(result);
      }
    });
    function onComplete(res) {
      console.log(`获取位置成功:`, res);
      let { position } = res;
      center[0] = position.lng;
      center[1] = position.lat;
      addMarker(AMap);
      getAdd();
    }
    function onError(err) {
      console.log(`获取位置失败:`, err);
    }
  });
};
/** 地图加载完成后 （根据经纬度获取地址） */
const getAdd = () => {
  const AMap = (window).AMap;
  const geocoder = new AMap.Geocoder({
    radius: 1000,
    extensions: "all",
  });
  const [lng, lat] = center;
  geocoder.getAddress([lng, lat], function (status, result) {
    if (status === "complete" && result.info === "OK") {
      console.log(result, "result");
      if (result && result.regeocode) {
        console.log(
            `result.regeocode.formattedAddress:`,
            result.regeocode.formattedAddress
        );
      }
    }
  });
};
</script>

<style scoped>
.map {
  width: 90%;
  height: 600px;

}
.el-container{
  width:80%;
  margin:15px auto;
}
.el-aside{
  background-color: #ecf5ff;
  height: 600px;
  width:40%;
}
.el-main{
  background-color: #9abbdc;
  height: 600px;
  display: flex;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-tab-pane li:first-child{
  margin-top: 0;
  display: list-item;

}
.el-tab-pane h3{
  font-size: 18px;
  color: #5C5429;
  margin-bottom: 12px;

}
.el-tab-pane p{
  margin-bottom: 10px;
  /*display: block;*/
  font-size: 14px;
  color: #fff;
}
</style>

